<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>七巧板</title>
		<style type="text/css">			
			#canvas{
				border: solid 1px #000;
				width: 400px;
				height: 400px;
			}			
		</style>
	</head>
	<body>
		
		<canvas id="canvas" width="800" height="800"></canvas>
		
		<script type="text/javascript">
			var tangram=[	{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
							{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
							{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
							{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
							{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a54c09"},
							{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"},
							{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
						]
			var canvas = document.getElementById("canvas");		
			canvas.width = 800;
			canvas.height = 800;
			var context = canvas.getContext("2d");
			
			for (var i = 0; i<tangram.length; i++) {
				context.beginPath();
				context.moveTo(tangram[i].p[0].x,tangram[i].p[0].y);
				for (var j = 1; j<tangram[i].p.length; j++) {
					context.lineTo(tangram[i].p[j].x,tangram[i].p[j].y);
				}
				context.closePath();
				context.fillStyle = tangram[i].color;
				context.fill();
			}						
		</script>
	</body>
</html>

